<template>
    <div class="blog-details">
        <div class="left-container">
            <BlogDetails :blogInfo="blogInfo" v-motion-slide-left></BlogDetails>
        </div>

        <div class="right-container" :style="{ left: leftNum + 'px' }" v-motion-slide-right>
            <a-card title="目录结构" size="small" class="toc">
                <div class="toc-list">
                    <template v-if="tocArray.length == 0">
                        <div class="no-data">未解析到目录</div>
                    </template>
                    <template v-else>
                        <div v-for="(item, index) in tocArray" :key="index">
                            <a :href="'#' + item.id" class="toc-item"
                                :style="{ 'padding-left': (item.level * 15) + 'px' }">{{ item.title }}
                            </a>
                        </div>
                    </template>
                </div>
            </a-card>
            <handle-card title="sidebar.category" :cardList="categoryList"></handle-card>
        </div>
    </div>
</template>

<script setup>
import { useRoute } from "vue-router";
import { getCurrentInstance, ref, nextTick } from "vue";
import hljs from "highlight.js";
import "highlight.js/styles/atom-one-light.css"; //样式
import HandleCard from '@/components/handle-card.vue';
import BlogDetails from "@/components/blog-details.vue";
const { proxy } = getCurrentInstance();
const route = useRoute();
const blogId = ref(route.params.blogId)
const leftNum = ref((window.innerWidth - 1350) / 2 + 1350 - 300);
const api = {
    getBlogDetail: "/view/getBlogDetail",
    loadCategory: "/view/loadCategory",
};
const blogInfo = ref({});
const getBlogDetail = async () => {
    let result = await proxy._request({
        url: api.getBlogDetail,
        params: {
            blogId: blogId.value
        },
    });
    if (!result) {
        return;
    }
    blogInfo.value = result.data;
    makeToc();
    highlightCode()
};
getBlogDetail();

//获取分类
const categoryList = ref([]);
const loacCategoryList = async () => {
    let result = await proxy._request({
        url: api.loadCategory,
        params: {
            pageSize: 5,
        },
    });
    if (!result) {
        return;
    }

    categoryList.value = result.data.map(v => {
        return {
            cover: proxy.globalInfo.imageUrl + v.cover,
            name: v.categoryName,
            count: v.blogCount
        }
    });
};
loacCategoryList();

//获取目录结构
const tocArray = ref([]);
const makeToc = () => {
    nextTick(() => {
        // 定义参与目录生成的标签
        const tocTags = ["H1", "H2", "H3", "H4", "H5", "H6"];
        // 获取所有标题标签
        let contentDom = document.querySelector("#content");
        const childNodes = contentDom.childNodes;
        let index = 0;
        childNodes.forEach((item) => {
            let tagName = item.tagName;
            if (!tagName) {
                return true;
            }
            if (tocTags.includes(tagName.toUpperCase())) {
                index++;
                let id = "toc" + index;
                item.setAttribute("id", id);
                tocArray.value.push({
                    id: id,
                    title: item.innerText,
                    level: Number.parseInt(tagName.substring(1))
                })

            }
        })
    })
}

const highlightCode = () => {
    console.log("highlight")
    nextTick(() => {
        //高亮显示
        let blocks = document.querySelectorAll("pre code");

        blocks.forEach((block) => {
            hljs.highlightBlock(block);
        });
    });
}
</script>

<style lang="scss" scoped>
.blog-details {
    width: 100%;
    min-height: 100%;
    display: flex;
    box-sizing: border-box;

    .left-container {
        flex: 1;
        margin-right: 20px;
        overflow: scroll;

        hljs ul {
            list-style: decimal;
            margin: 0 0 0 40px !important;
            padding: 0
        }

        .hljs li {
            list-style: decimal-leading-zero;
            border-left: 1px solid #111 !important;
            padding: 2px 5px !important;
            margin: 0 !important;
            line-height: 14px;
            width: 100%;
            box-sizing: border-box
        }

        .hljs li:nth-of-type(even) {
            background-color: rgba(255, 255, 255, .015);
            color: inherit
        }

        /*最后 代码太长的话不会自动换行*/
        .hljs {
            white-space: pre-wrap;
            word-wrap: break-word;
        }

    }

    .right-container {
        width: 300px;

        .toc {
            margin-bottom: 20px;

            .toc-list {
                max-height: 400px;
                overflow: auto;

                .no-data {
                    text-align: center;
                    color: rgb(148, 146, 146);
                    line-height: 40px;
                    font-size: 13px;
                }

                .toc-item {
                    line-height: 30px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    cursor: pointer;
                    color: #555666;
                }

                .toc-item:hover {
                    color: #c94646;
                }
            }
        }
    }
}
</style>
